<template>
  <div class="footer-wrapper">
    <ul>
      <li>
        <img src="@/assets/images/img_foot1.png">
        <div class="txt">
          <p>专业知产顾问团队为您推荐商品</p>
          <p>提供最新优惠信息</p>
        </div>
      </li>
      <li>
        <img src="@/assets/images/img_foot2.png">
        <div class="txt">
          <p>卓一慧众知识产权</p>
          <p>全程服务跟踪售后有保障</p>
        </div>
      </li>
      <li>
        <img src="@/assets/images/img_foot3.png">
        <div class="txt">
          <p>客服热线</p>
          <span>400-9932-799</span>
        </div>
      </li>
    </ul>
    <div class="foot">
      <div class="link">
        <a @click="onSwt">关于我们</a><a @click="onSwt">联系我们</a><a @click="onSwt">帮助中心</a><a @click="onSwt">在线咨询</a>
      </div>
      <p>版权所有：北京卓一慧众知识产权代理有限公司   地址：北京市海淀区万泉庄路15号3层301-024</p>
      <p>本公司所有专利业务皆由北京精翰代理申报     北京精翰长期授权于本公司全权处理代理的所有专利及其他业务</p>
      <a href="http://beian.miit.gov.cn" target="_blank">备案号：京ICP备17041879号-1 </a>
    </div>
  </div>
</template>

<script>
import apis from '@/api'

export default {
  name: 'GlobalFooter',
  methods: {
    onSwt () {
      window.open(apis.Swt)
    }
  }
}
</script>

<style scoped>
p, a, li, ul, div, span, input, textarea, form {margin: 0;padding: 0;font-weight: 500;}
.footer-wrapper{background-color: #16181a;margin-top:20px;padding: 60px 0 23px;}
.footer-wrapper ul{display: flex;align-items: center;justify-content: center;width: 1170px;margin: 0 auto;border-bottom: solid 1px #414550;padding-bottom: 44px;}
.footer-wrapper ul li{display: flex;align-items: center;justify-content: center;width: 33.33%;position: relative}
.footer-wrapper ul li:before{position: absolute;content: '';width: 1px;height: 74px;background-color: #414550;left: 0;top: 50%;margin-top: -37px;}
.footer-wrapper ul li:first-child:before{width: 0;}
.footer-wrapper ul li .txt{font-size: 16px;color: #ffffff;margin-left: 18px;}
.footer-wrapper ul li .txt span{font-size: 20px;font-weight: 700;}
.foot{text-align: center;}
.foot .link{margin: 24px 0 15px;}
.foot .link a{font-size: 16px;color: #ffffff;position: relative;padding: 0 18px;}
.foot .link a:before{position: absolute;content: '';width: 1px;height: 13px;background-color: #d3d3d3;left: 0;top: 50%;margin-top: -6px;}
.foot .link a:after{position: absolute;content: '';width: 1px;height: 13px;background-color: #727373;left: 1px;top: 50%;margin-top: -6px;}
.foot .link a:first-child:before,.foot .link a:first-child:after{width: 0;}
.foot p{font-size: 12px;color: #87888e;line-height: 24px;opacity: 0.6;}
.foot>a{font-size: 12px;color: #a2a2a2;display: inline-block;margin-top: 4px;}
</style>
